<template>
  <div v-show='havePage' class='flex'>
    <img src='https://zszken.cdn.bcebos.com/static/baby-na.png'>
    <p>{{ title }}</p>
    <router-link v-if='toLogin' :to='backPath' class='to_login'>
      <van-button size='small' type='info'>
        去登陆
      </van-button>
    </router-link>
  </div>
</template>
<script>
import { Button } from 'vant'
export default {
  props: {
    title: String,
    path: String,
  },
  data () {
    return {
      havePage: false,
      toLogin: false,
    }
  },
  computed: {
    backPath () {
      if (this.path) {
        return `/login?redirect=${this.path}`
      }
      return `/login`
    },
  },
  components: {
    [Button.name]: Button,
  },
  methods: {
    onDisplay (path) {
      this.havePage = true
      if (path) {
        this.backPath = path
      }
    },
    onHide () {
      this.havePage = false
    },
    onLogin () {
      this.toLogin = true
    },
  },
}
</script>
<style lang='scss' scoped>
div {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 100%;
}
img {
  text-align: center;
  margin: 30px 0;
  width: 100px;
  height: 100px;
}
p {
  text-align: center;
}
.to_login {
  margin-top: 20px;
}
</style>
